/* page{
  background-color: #999999;
} */
/* view{
   使用 主题颜色 
   color: var(--themeColor); 
 }*/
//  轮播图
.index_swiper {

  // 一套代码相对固定: swiper和image
  swiper {
    width: 750rpx;
    height: 340rpx;

    image {
      width: 100%;
    }
  }
}

// 导航栏
.index_cate {
  display: flex;

  navigator {
    // 四个盒子,均等占比父容器.index_cate
    flex: 1;
    // navigator只能使用flex,不能使用justify-content
    padding: 20rpx;

    image {
      /* 
      1 因为image有默认宽
      2 image标签也存在默认的宽度和高度(默认的宽高)
           320px * 240px (默认是一个类似正方形) 
      */
      width: 100%;
    }
  }
}

// 楼层
.index_floor {

  // border: 1px solid green;
  // .floor_group {
  // .floor_title {
  // width: 750rpx;
  // image使用了mode="widthFix"后, 外面的view自带有多余高度,需要重新调整,去除多余高度
  // height: 59rpx;

  // border: 1rpx solid red;
  // image {
  // 图片默认有白色边框，去除
  // display: block;
  // border: 1px solid green;
  // width: 100%;
  // }
  // }

  /*   .floor_list {
      display: flex;
      margin-left:10rpx;
      margin-bottom: 10rpx; */
  // width: 760rpx;
  // border: 1px solid red;
  // padding: 0 5rpx;
  // 不用清除浮动,本来就要右边图片上来
  // overflow: hidden;

  /* .left-img-box {
        width: 250rpx;
        height: 500rpx; */
  // border: 1px solid rgb(34, 0, 255);
  // float: left;
  // margin-right: 10rpx;

  // display: flex;
  // padding: 10rpx;
  // height: 400rpx;
  // navigator {
  // display: flex;
  // justify-self: center;
  // border: 1px solid yellow;

  // image {
  // display: block;
  // border: 1px solid red;
  // width: 250rpx;
  // float: left;
  // padding: 5rpx;
  // justify-content: center;
  // align-items: center;
  // width: 100%;
  // }
  // }
  /*   }

      .right-img-box {
        width: 480rpx;
        height: 500rpx;
        display: flex; */
  // flex-direction: column;
  // flex-wrap: wrap;
  // justify-content:space-around;
  // align-items:center;
  // border-size 自身占位
  // border: 1rpx solid rgb(255, 0, 106);
  // background-color: aqua;

  // navigator {
  // flex: 1;
  // display: block;
  // padding: 12.5rpx;          
  // width: 250rpx;
  // padding: 10rpx;

  // border: 1px solid rgb(0,255, 0);
  // padding-left: 10rpx;
  // justify-content:center;
  // align-items: center;
  // image {
  // 图片之间可以将间歇清除; 如果没有这个选项,那么,默认有一个白色线条,来区分
  // 只管右边的4个图片
  // display: block;
  // border: 1px solid #00ff33;
  // 带有navigator循环标签,不使用
  // justify-content:space-evenly;
  // width: 230rpx;
  // padding-right: 10rpx;
  // height: 250rpx;
  // 右边四个图片是正方形,适合配合padding使用
  // padding: 10rpx;
  // padding: 10rpx;
  // margin-right: 10rpx;
  // margin-bottom: 10rpx;
  /* }
        }
      } */

  // display: flex;
  // flex-wrap: wrap;
  // flex-direction: column;
  // navigator {
  //   // justify-content:end;
  //   // flex: 1;
  //   // display: flex;
  //   padding: 10rpx;

  // }
  // }



  // }
}

// 教程楼层
.index_floor {

  .floor_group {
    padding: 10rpx 0;
    .floor_title {
      image {
        width: 100%;
      }
    }

    .floor_list {
      // navigator的.floor_list父元素没有设置高度
      overflow: hidden;

      navigator {
        // 让所有遍历出来的图片,都做左浮动
        float: left;
        // navigator再继承上面的宽度
        width: 33.33%;

        // width: 250rpx;
        /* 后四个超链接(navigator) */
        &:nth-last-child(-n+4) {
          /*
          1 原图的宽高 232 * 386
          2 232 / 386 = 33.33vw /height
          3 第一张图片的高度 height:33.33vw * 386 / 232 / 2 
          4 此处使用的宽度单位
           */
          height: 33.33vw * 386 / 232 / 2;
          // 11111111111内置image只是宽度减半(10rpx/2),但高度不变
          border-left: 10rpx solid #fff;
        }
        /* 2 3 两个超链接 */
        &:nth-child(2), &:nth-child(3) {
          border-bottom: 10rpx solid #fff;
        }


        image {
          width: 100%;
          // width: 250rpx;
          /* 
          1)第一个图片的高度,是等比拓展widthFix的高度(mode="widthFix"会优先image默认的宽度);
          2)后面四个图片,高度需要继承navigator的宽度,否则就是默认的图片高度 
          */
          height: 100%;
        }

      }
    }

  }


}


// 清除浮动
// .div1 {
//   width: 200rpx;
//   // height: 200rpx;
//   border: 1px solid red;
//   //方法一 bfc
//   // overflow: hidden;
//   // 方法二 只设置高, 不生效
//   // height: 100rpx;

//   .div2 {
//     float: left;
//     width: 100rpx;
//     height: 100rpx;
//     background-color: aquamarine;
//   }
// }